﻿
@{
    ViewBag.Title = "Feature 1: Country-temperature";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row" ng-controller="countryController">
    <h4>
        <span style="color: green; font-weight: bold;">Feature 1</span>&nbsp;There're 5 countries in the database.
    </h4>
    <h4>The average temperature is calculated based on all cities across the country. Not directly pulled out from db. </h4>
    <h4>@Html.ActionLink("Click here to see feature 2 after reviewing current page", "Index", "City")</h4>

    <div class="col-md-6">
        <dropdown-multiselect model="selectedCountryIds" options="Countries"></dropdown-multiselect>
    </div>
    <div class="col-md-6">
        @*<ul>
                <li data-ng-repeat="id in selectedCountryIds">
                    {{ id }}
                </li>
            </ul>*@
        <table class="table table-striped table-responsive">
            <tr>
                <th>
                    CountryId
                </th>
                <th>
                    Country Name
                </th>
                <th>Temperature(avg)</th>
                @*<th></th>*@
            </tr>
            <tr ng-repeat="c in Countries | inArray:selectedCountryIds:'CountryId'">
                @*ng-click="get(c)" :click row to display data instead of clicking edit*@
                <td>
                    {{c.CountryId}}
                </td>
                <td>
                    {{c.CountryName}}
                </td>
                <td>
                    {{c.Temperature}}
                </td>
                @*<td>
                        <button class="btn btn-info" ng-click="get(c)">Edit</button>&nbsp;
                        <button class="btn btn-danger" ng-click="delete(c.CountryId)">Delete</button>
                    </td>*@
            </tr>
        </table>

        @*<form class="form-horizontal">
                <div class="form-group">
                    <label for="CountryId" class="col-md-4">CountryId</label>
                    <input type="text" Id="CountryId" ng-model="CountryId" class="form-control col-md-8" readonly="readonly" />
                </div>
                <div class="form-group">
                    <label for="CountryName" class="col-md-4">CountryName</label>
                    <input type="text" Id="CountryName" ng-model="CountryName" class="form-control col-md-8" />
                </div>
                <div class="form-group">
                    <label for="Temperature" class="col-md-4">Temperature</label>
                    <input type="text" Id="Temperature" ng-model="Temperature" class="form-control col-md-8" />
                </div>
                <button class="btn btn-primary" ng-click="clear()">New</button>
                <button class="btn btn-success" ng-click="save()">Save</button>
            </form>
            <br />
            <p class="lead">{{Message}}</p>*@
    </div>
</div>


@section scripts{
    <script src="~/Scripts/Directives/directives.js"></script>
    <script src="~/Scripts/Filters/filters.js"></script>
    <script src="~/Scripts/App/app.js"></script>
    <script src="~/Scripts/Services/countryService.js"></script>
    <script src="~/Scripts/Controllers/countryController.js"></script>
}
